<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <!-- admin端管理端的省分组检查统计 -->
                    <span style="font-size: 20px;">省分组分项检查统计</span>
                    <el-button class="button" text @click="refreshData">刷新</el-button>
                </div>
            </template>
            <div class="content">

                <el-table :data="tableData" style="width: calc(90% - 30px);" :row-class-name="tableRowClassName">
                    <el-table-column prop="id" label="省编号"  />
                    <el-table-column prop="name" label="省名称" />
                    <el-table-column prop="so2Level" label="SO2超标累计"  />
                    <el-table-column prop="coLevel" label="CO超标累计" />
                    <el-table-column prop="spmLevel" label="PM2.5超标累计" />
                    <el-table-column prop="aqiId" label="AQI超标累计" />
                </el-table>

                <div id="chart" class="echarts-container"></div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $axios from '../utils/axios'
import * as echarts from 'echarts'

const tableData = ref([])

const init = async () => {
    const path = '/statistics/proGroup'
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        tableData.value = res.result
        drawChart()
    }
}
const refreshData = () => {
    init()
}
onMounted(() => {
    init()
})
//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : 'normal-row'
}

const drawChart = () => {
    const chartData = tableData.value.map(item => ({
        name: item.name,
        so2Level: item.so2Level,
        coLevel: item.coLevel,
        spmLevel: item.spmLevel,
        aqiId: item.aqiId
    }))

    const chart = echarts.init(document.getElementById('chart'))
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: chartData.map(item => item.name)
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'SO2超标累计',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: chartData.map(item => item.so2Level)
            },
            {
                name: 'CO超标累计',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: chartData.map(item => item.coLevel)
            },
            {
                name: 'PM2.5超标累计',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: chartData.map(item => item.spmLevel)
            },
            {
                name: 'AQI超标累计',
                type: 'bar',
                data: chartData.map(item => item.aqiId),
                emphasis: {
                    focus: 'series'
                },
                markLine: {
                    lineStyle: {
                        type: 'dashed'
                    },
                    data: [[{ type: 'min' }, { type: 'max' }]]
                }
            }
        ]
    }
    chart.setOption(option)
}
</script>

<style scoped>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 96%; */
}

.box-card {
    width: 98%;
    height: 95%;
    margin-top: 12px;
    margin-left: 1%;
    border-radius: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
}

.echarts-container {
    width: 100%;
    height: 500px;
    margin-top: 20px;
}

#chart {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    margin-top: 30px;
}

.button {
    padding: 0;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: #87e09a; /* 背景 */
    color: #333; /* 深灰色文本 */
    border: 5px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
    text-align: center; /*表头文字居中  */
}
.el-table .normal-row {
    --el-table-tr-bg-color: #c6f1cf; /* 白色背景 */
    color: #333; /* 深灰色文本 */
    border: 1px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
}
/* 表头样式 */
.el-table th {
    background-color: #434343 !important; /* 表头背景色 */
    color: #ffffff; /* 表头文字颜色 */
    font-size: 15px; /* 表头字体大小 */
    text-align: center!important; /*表头文字居中  */
    padding: 10px; /* 表头内边距 */
}
/* 表格内容样式 */
.el-table td {
    font-size: 15px; /* 表格内容字体大小 */
    color: #333; /* 表格内容文字颜色 */
    text-align: center!important; /* 表格内容文字居中 */
    padding: 10px; /* 表格内容内边距 */
}
/* 鼠标悬停行的样式 */
.el-table .el-table__row:hover {
    background-color: #75a2ec !important; /* 浅蓝色背景 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
</style>
